<template>
  <div class="box">
    <div style="padding-bottom: 20px">
      <ul style="margin-bottom: 50px">
        <li v-for="data in lists" :key="data.id" @click="handleChangePage(data.id)">
          <!--        <router-link to="/detail">{{ data }}</router-link>-->
          <div class="box-main">
            <img :src="`${publicPath}${data.imgs}`">
            <p style="font-size: 14px;color: #989797">{{data.text}}</p>
            <h1 style="display: inline-block">{{ data.id }}</h1>
            <p>{{ data.title }}</p>

            <div
              class="bt"
              style="font-weight: bold"
              @click.stop="dp(data)"
            >预订</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import http from "@/util/http";
import Cookies from "js-cookie";
import {Toast} from "vant";

export default {
  name: 'comingsoon',
  data() {
    return {
      publicPath:process.env.BASE_URL,  //访问public文件配置
      // list: ['aaa','bbb','ccc'],
      lists:[],
    }
  },
  mounted() {
    http.get('/posts2',{

    }).then(res =>{
      this.lists = res.data
    })
    // axios.get('/posts1').then
    // (res => {
    //   console.log(res.data)
    //   this.lists = res.data
    // })
  },
  methods:{

    handleChangePage(id){
      //通过路径跳转
      this.$router.push(`/detail/${id}/${2}`)

      //通过命名路由跳转
      // this.$router.push({
      //   name: 'inb',
      //   params: {
      //     id
      //   }
      //})
    },
    dp(data){
      if(this.$store.state.userCookie!=''){  //vuex持久化写法
      // if(Cookies.get('inb')){
        Toast({
          type: 'success',
          message: '订票成功',
          duration:500
        });
        http.post('/dingdan',{
          title:data.title,
          imgs:data.imgs,
          author:data.author,
          text:data.text
        })
      }else{
        Toast({
          type: 'fail',
          message: '请先登录',
          duration:500
        });
      }

    }
  }
}
</script>

<style scoped lang="scss">
.box{

  .box-main{
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    img{
      float: left;
      height: 100px;
      width: 150px;
    }
    p{
      display: inline-block;
    }
    p,h1{
      margin-left: 10px;
    }
  }
}
.bt{
  float: right;
  margin-right: 10px;
  background-color: #de661c;
  padding: 5px;
  border-radius: 5px;
}



</style>
